<template>
  <div>
    <!-- 查询  -->
    <Card style="padding-left:20px;padding-right:20px;">
      <!-- 第一行信息 -->
      <Row gutter="40">
        <i-col span="7">
          <Cascader change-on-select :data="organizationList" v-model="attendanceForm.organization" placeholder="所属机构" clearable></Cascader>
        </i-col>
        <i-col span="7">
          <Input v-model="attendanceForm.groupName" placeholder="组名" />
        </i-col>
        <i-col span="6">
          <Input v-model="attendanceForm.employeeName" placeholder="员工姓名" />
        </i-col>
      </Row>
      <!-- 新建小组对话框 -->
      <Modal
        v-model="createGroupModel"
        :mask-closable="false"
        width="550"
        @on-visible-change="modalVisibleChange"
      >
        <span slot="header" style="color:#fff;font-size:16px">新建小组</span>
        <Form
          ref="groupForm"
          :model="groupForm"
          :rules="groupRules"
          style="display: block;"
        >
          <Row gutter="40">
            <i-col span="12">
              <FormItem prop="organization">
                <Cascader change-on-select :data="organizationList" v-model="groupForm.organization" placeholder="所属机构" clearable></Cascader>
              </FormItem>
            </i-col>
            <i-col span="12">
              <FormItem prop="groupName">
                <Input v-model="groupForm.groupName" placeholder="组名" required />
              </FormItem>
            </i-col>
          </Row>
          <Row gutter="40">
            <i-col span="12">
              <FormItem prop="clockInTime">
                <TimePicker
                  v-model="groupForm.clockInTime"
                  placeholder="请选择上班时间"
                  style="width:100%"
                  :editable="false"
                ></TimePicker>
              </FormItem>
            </i-col>
            <i-col span="12">
              <FormItem prop="clockOutTime">
                <TimePicker
                  v-model="groupForm.clockOutTime"
                  placeholder="请选择下班时间"
                  style="width:100%"
                  :editable="false"
                ></TimePicker>
              </FormItem>
            </i-col>
          </Row>
          <Row gutter="40">
            <i-col span="12">
              <FormItem prop="clockLocation">
                <Input v-model="groupForm.clockLocation" placeholder="打卡地点" required />
              </FormItem>
            </i-col>
            <i-col span="12">
              <FormItem prop="clockScope">
                <i-input v-model="groupForm.clockScope" placeholder="打卡范围(米以内)" required>
                  <span slot="append">m</span>
                </i-input>
              </FormItem>
            </i-col>
          </Row>
          <Row gutter="40">
            <i-col span="12">
              <FormItem prop="longitude">
                <Input v-model="groupForm.longitude" placeholder="经度" />
              </FormItem>
            </i-col>
            <i-col span="12">
              <FormItem prop="latitude">
                <Input v-model="groupForm.latitude" placeholder="纬度" />
              </FormItem>
            </i-col>
          </Row>
        </Form>
        <div slot="footer">
          <Button type="primary" @click="groupFormSubmit" :loading="groupLoading">保存</Button>
          <Button type="primary" @click="groupFormCancel">取消</Button>
        </div>
      </Modal>
      <!-- 第二行信息 -->
      <Row gutter="40" style="margin-top:25px;margin-bottom:10px;">
        <i-col span="7">
          <Input v-model="attendanceForm.clockLocation" placeholder="打卡地点" />
        </i-col>
        <i-col span="7">
          <TimePicker v-model="attendanceForm.clockInTime" placeholder="请选择上班时间" style="width:100%"></TimePicker>
        </i-col>
        <i-col span="6">
          <TimePicker
            v-model="attendanceForm.clockOutTime"
            placeholder="请选择下班时间"
            style="width:100%"
          ></TimePicker>
        </i-col>
      </Row>
      <!-- 3 -->
      <Row gutter="40" style="margin-top:25px;margin-bottom:10px;">
        <i-col span="8">
          <Button
            type="primary"
            @click="attendanceQuery(0)"
            style="margin-right:20px"
            :loading="querySubmit"
          >查询</Button>
          <Button @click="reSubmit" style="margin-right:20px">重置</Button>
          <Button type="primary" @click="createGroup">新建小组</Button>
        </i-col>
      </Row>
    </Card>
    <Card style="padding-left:20px;padding-right:20px;margin-top:20px">
      <Table :columns="attendanceColumns" :data="attendanceData">
        <template slot-scope="{row}" slot="operate">
          <Button type="primary" @click="personManagementModalShow(row)">人员管理{{row.operate}}</Button>
          <Button
            type="primary"
            style="margin-left:20px;margin-right:20px;"
            @click="updateInfoModalShow(row)"
          >修改</Button>
          <Button type="primary" @click="deleteGroup(row)">删除</Button>
        </template>
      </Table>
      <!-- 删除 -->
      <Modal v-model="delModal" header-hide="true" footer-hide="true" width="450" :mask-closable="false">
        <div>
          <span style="font-size:28px; color:#FF9900;margin: 0 10px;">
            <Icon type="ios-help-circle" />
          </span>
          <span slot="header" style="font-size:16px">删除确认</span>
        </div>
        <span style="display:block;margin:20px 0 20px 60px; font-size:14px;">您确定要删除吗？</span>
        <div style="width:400px; text-align:right;">
          <Button type="primary" @click="delSubmit" style="margin-right:20px;">确定</Button>
          <Button @click="delCancel">取消</Button>
        </div>
      </Modal>
      <!-- 人员管理 -->
      <Modal v-model="personManagementModal" :mask-closable="false" width="550">
        <span slot="header" style="color:#fff;font-size:16px">人员管理</span>
        <span style="display:inline-block;margin-left:60px">
          <Transfer
            :data="transferData"
            :target-keys="targetKeys"
            :render-format="renderFormat"
            :titles="transferTitle"
            @on-change="onChange"
          ></Transfer>
        </span>
        <div slot="footer">
          <Button type="primary" @click="personManagementSubmit" :loading="roleSubmit">保存</Button>
          <Button type="primary" @click="personManagementCancel">取消</Button>
        </div>
      </Modal>
      <!-- 修改信息 -->
      <Modal v-model="updateInfoModal" :mask-closable="false" width="550">
        <span slot="header" style="color:#fff;font-size:16px">修改信息</span>
        <Form
          ref="updateGroupForm"
          :model="updateGroupForm"
          :rules="updateGroupRules"
          style="display: block;margin-left:20px;margin-right:20px"
        >
          <Row gutter="40">
            <i-col span="12">
              <FormItem prop="groupName">
                <Input v-model="updateGroupForm.groupName" placeholder="组名" required />
              </FormItem>
            </i-col>
            <i-col span="12">
              <FormItem prop="clockLocation">
                <Input v-model="updateGroupForm.clockLocation" placeholder="打卡地点" required />
              </FormItem>
            </i-col>
          </Row>
          <Row gutter="40">
            <i-col span="12">
              <FormItem prop="clockInTime">
                <TimePicker
                  v-model="updateGroupForm.clockInTime"
                  placeholder="请选择上班时间"
                  style="width:100%"
                  :editable="false"
                ></TimePicker>
              </FormItem>
            </i-col>
            <i-col span="12">
              <FormItem prop="clockOutTime">
                <TimePicker
                  v-model="updateGroupForm.clockOutTime"
                  placeholder="请选择下班时间"
                  style="width:100%"
                  :editable="false"
                ></TimePicker>
              </FormItem>
            </i-col>
          </Row>
          <Row gutter="40">
            <i-col span="12">
              <FormItem prop="longitude">
                <Input v-model="updateGroupForm.longitude" placeholder="经度" required />
              </FormItem>
            </i-col>
            <i-col span="12">
              <FormItem prop="latitude">
                <Input v-model="updateGroupForm.latitude" placeholder="纬度" required />
              </FormItem>
            </i-col>
          </Row>
          <Row gutter="40">
            <i-col span="12">
              <FormItem prop="clockScope">
                <i-input v-model="updateGroupForm.clockScope" placeholder="打卡范围(米以内)" required>
                  <span slot="append">m</span>
                </i-input>
              </FormItem>
            </i-col>
          </Row>
        </Form>
        <div slot="footer">
          <Button type="primary" @click="updateGroupSubmit" :loading="updateSubmit">确定</Button>
          <Button type="primary" @click="updateGroupCancel">取消</Button>
        </div>
      </Modal>
      <!-- 页数 -->
      <Row>
        <i-col span="24" style="text-align:right;margin-top:20px">
          <Page
            :total="total"
            show-sizer
            show-total
            @on-change="indexChange"
            @on-page-size-change="pageSizeChange"
            :page-size-opts="pageSizeOptions"
          />
        </i-col>
      </Row>
    </Card>
    <Button type="primary" @click="info" v-if="false"></Button>
  </div>
</template>

<script>
export default {
  data() {
    // 经纬度校验
    const validateLongitude = (rule, value, callback) => {
      let specialReg = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g;
      if (value && !specialReg.test(value)) {
        callback(new Error("经度必须是数字"));
      } else {
        callback();
      }
    };
    const validateLatitude = (rule, value, callback) => {
      let specialReg = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g;
      if (value && !specialReg.test(value)) {
        callback(new Error("纬度必须是数字"));
      } else {
        callback();
      }
    };
    // 特殊字符校验
    const validateSpecialChara = (rule, value, callback) => {
      let specialReg = /^[0-9a-zA-Z\u4e00-\u9fa5]+$/;
      if (value && !specialReg.test(value)) {
        callback(new Error("组名不能含有特殊字符"));
      }
      callback();
    };
    // 时间先后校验
    const validateClockInTime = (rule, value, callback) => {
      if (this.groupForm.clockOutTime) {
        this.$refs.groupForm.validateField("clockOutTime");
        callback();
      } else if (this.updateGroupForm.clockOutTime) {
        this.$refs.updateGroupForm.validateField("clockOutTime");
        callback();
      } else {
        callback();
      }
    };
    const validateClockOutTime = (rule, value, callback) => {
      if (
        value &&
        this.groupForm.clockInTime &&
        value <= this.groupForm.clockInTime
      ) {
        callback(new Error("下班时间不能早于上班时间"));
      } else if (
        value &&
        this.updateGroupForm.clockInTime &&
        value <= this.updateGroupForm.clockInTime
      ) {
        callback(new Error("下班时间不能早于上班时间"));
      } else {
        callback();
      }
    };
    // 正整数校验
    const validateClockScope = (rule, value, callback) => {
      let scopeReg = /^[0][0-9]*$/;
      let scopeReg2 = /^[1-9][0-9]*$/;
      if (scopeReg.test(value)) {
        callback(new Error("不能以0开头"));
      } else if (!scopeReg2.test(value)) {
        callback(new Error("只能输入正整数"));
      } else {
        callback();
      }
    };
    // 数字校验
    const validateMath = (rule, value, callback) => {
      let scopeReg = /^[0-9]*$/;
      if (!scopeReg.test(value)) {
        callback(new Error("只能输入正整数"));
      } else {
        callback();
      }
    };
    return {
      // 考勤相关查询表单
      attendanceForm: {
        organization: [],
        groupName: null,
        employeeName: null,
        clockLocation: null,
        clockInTime: null,
        clockOutTime: null
      },
      organizationList: [],
      // 表格数据
      attendanceColumns: [
        {
          title: "管理机构",
          key: "organizationNo",
          align: "center",
          width: "350"
        },
        {
          title: "组名",
          key: "groupName",
          align: "center",
          width: "160"
        },
        {
          title: "打卡地点",
          key: "signSite",
          align: "center",
          width: "190"
        },
        {
          title: "上班时间",
          key: "upTime",
          align: "center",
          width: "120"
        },
        {
          title: "下班时间",
          key: "downTime",
          align: "center",
          width: "120"
        },
        {
          title: "经度",
          key: "longitude",
          align: "center",
          width: "120"
        },
        {
          title: "纬度",
          key: "latitude",
          align: "center",
          width: "120"
        },
        {
          title: "打卡范围(米)",
          key: "signRang",
          align: "center",
          width: "120"
        },
        {
          title: "人员清单",
          key: "personnelList",
          align: "center",
          minWidth: 260
        },
        {
          title: "操作",
          key: "operate",
          align: "center",
          width: "420",
          slot: "operate"
        }
      ],
      attendanceData: [],
      // 新建小组对话框
      createGroupModel: false,
      groupLoading: false,
      groupId: null,
      groupForm: {
        organization: [],
        groupName: null,
        clockInTime: "09:00:00",
        clockOutTime: "17:00:00",
        clockLocation: null,
        clockScope: null,
        longitude: null,
        latitude: null
      },
      groupRules: {
        organization: [
          { required: true, type:"array", message: "所属机构不能为空", trigger: "change" }
        ],
        groupName: [
          { required: true, message: "组名不能为空", trigger: "blur" },
          { validator: validateSpecialChara, trigger: "change" },
          { validator: validateSpecialChara, trigger: "blur" }
        ],
        clockInTime: [
          { required: true, message: "上班时间不能为空", trigger: "blur" },
          { validator: validateClockInTime, trigger: "change" },
          { validator: validateClockInTime, trigger: "blur" }
        ],
        clockOutTime: [
          { required: true, message: "下班时间不能为空", trigger: "blur" },
          { validator: validateClockOutTime, trigger: "change" },
          { validator: validateClockOutTime, trigger: "blur" }
        ],
        clockLocation: [
          { required: true, message: "打卡地点不能为空", trigger: "blur" },
          { validator: validateSpecialChara, trigger: "change" },
          { validator: validateSpecialChara, trigger: "blur" }
        ],
        clockScope: [
          { required: true, message: "打卡范围不能为空", trigger: "blur" },
          { validator: validateClockScope, trigger: "change" },
          { validator: validateClockScope, trigger: "blur" }
        ],
        longitude: [
          { required: true, message: "经度不能为空", trigger: "blur" },
          { validator: validateLongitude, trigger: "change" },
          { validator: validateLongitude, trigger: "blur" }
        ],
        latitude: [
          { required: true, message: "纬度不能为空", trigger: "blur" },
          { validator: validateLatitude, trigger: "change" },
          { validator: validateLatitude, trigger: "blur" }
        ]
      },
      personManagementModal: false,
      // 穿梭框数据
      transferData: [],
      targetKeys: [],
      transferTitle: ["可选人员", "已选人员"],
      // 修改信息对话框
      updateInfoModal: false,
      updateGroupForm: {
        groupName: null,
        clockLocation: null,
        clockInTime: null,
        clockOutTime: null,
        longitude: null,
        latitude: null,
        clockScope: null
      },
      updateGroupRules: {
        groupName: [
          { required: true, message: "组名不能为空", trigger: "blur" },
          { validator: validateSpecialChara, trigger: "change" },
          { validator: validateSpecialChara, trigger: "blur" }
        ],
        clockInTime: [
          { required: true, message: "上班时间不能为空", trigger: "blur" },
          { validator: validateClockInTime, trigger: "change" },
          { validator: validateClockInTime, trigger: "blur" }
        ],
        clockOutTime: [
          { required: true, message: "下班时间不能为空", trigger: "blur" },
          { validator: validateClockOutTime, trigger: "change" },
          { validator: validateClockOutTime, trigger: "blur" }
        ],
        clockLocation: [
          { required: true, message: "打卡地点不能为空", trigger: "blur" },
          { validator: validateSpecialChara, trigger: "change" },
          { validator: validateSpecialChara, trigger: "blur" }
        ],
        clockScope: [
          {
            required: true,
            pattern: /^[0-9]*$/,
            message: "请输入正确的打卡范围",
            trigger: "blur"
          }
        ],
        longitude: [
          {
            required: true,
            pattern: /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g,
            message: "请输入正确的经度",
            trigger: "blur"
          }
        ],
        latitude: [
          {
            required: true,
            pattern: /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g,
            message: "请输入正确的纬度",
            trigger: "blur"
          }
        ]
      },
      total: 0,
      pageIndex: 1,
      pageSize: 10,
      pageObj: null,
      pageSizeOptions: [5, 10, 15, 20],
      transferList: [],
      leftList: [],
      rightList: [],
      moveKeys: [],
      newLeftList: [],
      newRightList: [],
      currentRow: "",
      querySubmit: false,
      roleSubmit: false,
      updateSubmit: false,
      delModal: false,
      delRow: []
    };
  },
  methods: {
    // 所属机构下拉框
    getSelectList() {
      // this.api.organizationDict().then(res => {
      //   //console.log(res);
      //   if (res.code == 200) {
      //     this.organizationList = res.data[0].listKeyValueVOS;
      //   } else {
      //     this.organizationList = [];
      //   }
      // });
      this.api.remanagecomList().then(res => {
        if (res.code == 200 && res.data != null) {
          let arr = []
          arr.push(res.data)
          arr.forEach(one=>{
            one.value = one.comcode
            one.label = one.comcode + '-' + one.name
            one.children = one.chilDren || []
            if (one.children) {
              one.chilDren.forEach(two=>{
                two.value = two.comcode
                two.label = two.comcode + '-' + two.name
                two.children = two.chilDren || []
                if (two.children) {
                  two.children.forEach(three=>{
                    three.value = three.comcode
                    three.label = three.comcode + '-' + three.name
                    three.children = three.chilDren || []
                    if (three.children) {
                      three.children.forEach(four=>{
                        four.value = four.comcode
                        four.label = four.comcode + '-' + four.name
                        four.children = four.chilDren || []
                      })
                    }
                  })
                }
              })
            }
          })
          console.log(arr);
          this.organizationList = arr
        } else {
          this.organizationList = [];
        }
      });
    },
    // 新建小组
    createGroup() {
      this.createGroupModel = true;
    },
    modalVisibleChange(value) {
      if (value == false) {
        this.createGroupModel = false;
        this.$refs.groupForm.resetFields();
      }
    },
    // 查询
    attendanceQuery(tmp) {
      if (tmp != 1) {
        this.querySubmit = true;
      }
      let obj = {
        UName: null,
        downTime: this.attendanceForm.clockOutTime,
        groupName: this.attendanceForm.groupName,
        index: this.pageIndex,
        organizationNo: this.attendanceForm.organization[this.attendanceForm.organization.length-1] || '',
        pageSize: this.pageSize,
        signSite: this.attendanceForm.clockLocation,
        uName: this.attendanceForm.employeeName,
        upTime: this.attendanceForm.clockInTime
      };
      for (let item in obj) {
        if (obj[item] == null || obj[item].length == 0) {
          delete obj[item];
        }
      }
      this.pageObj = obj;
      //console.log(obj)
      this.api.uerAttendanceQuery(obj).then(res => {
        // console.log(res);
        if (res.code == 200) {
          this.querySubmit = false;
          if (res.data != null) {
            this.attendanceData = res.data.records;
            this.attendanceData.forEach(element => {
              let expList = "";
              if (element.userGroupVOS.length > 0) {
                for (let i = 0; i < element.userGroupVOS.length; i++) {
                  if (i == element.userGroupVOS.length - 1) {
                    expList += element.userGroupVOS[i].username;
                  } else {
                    expList += element.userGroupVOS[i].username + "、";
                  }
                  // console.log(expList);
                }
              } else {
                expList = "暂未人员清单数据";
              }
              this.total = res.data.total;
              element.personnelList = expList;
              // console.log(element.personnelList, expList);
            });
            // console.log(this.attendanceData);
          } else {
            this.querySubmit = false;
            this.attendanceData = null;
          }

          //console.log(this.attendanceData)
          if (tmp != 1) {
            this.info(res.msg);
          }
        } else {
          this.info(res.msg);
          this.querySubmit = false;
        }
      });
    },
    // 分页查询
    pageSubmit() {
      this.pageObj.index = this.pageIndex;
      this.pageObj.pageSize = this.pageSize;
      this.api.uerAttendanceQuery(this.pageObj).then(res => {
        // console.log(res);
        if (res.code == 200) {
          let expList = "";
          this.attendanceData = null;
          if (res.data != null) {
            this.attendanceData = res.data.records;
            this.attendanceData.forEach(element => {
              expList = "";
              if (element.userGroupVOS.length > 0) {
                for (let i = 0; i < element.userGroupVOS.length; i++) {
                  if (i == element.userGroupVOS.length - 1) {
                    expList += element.userGroupVOS[i].username;
                  } else {
                    expList += element.userGroupVOS[i].username + "、";
                  }
                }
                
              } else {
                expList = "暂未人员清单数据";
              }
              this.total = res.data.total;
              element.personnelList = expList;
            });
            //console.log(this.attendanceData);
          } else {
            this.attendanceData = null;
            this.info(res.msg);
          }

          //console.log(this.attendanceData)
          //this.info(res.msg);
        }
      });
    },
    info(tip) {
      this.$Message.info(tip);
    },
    // 查询重置
    reSubmit() {
      this.querySubmit = false;
      this.attendanceForm = {
        organization: [],
        groupName: "",
        employeeName: "",
        clockLocation: "",
        clockInTime: "",
        clockOutTime: ""
      };
    },

    // 取消新建小组
    groupFormCancel() {
      this.$refs.groupForm.resetFields();
      this.createGroupModel = false;
      this.setSate = false;
    },
    // 保存新建小组
    groupFormSubmit() {
      this.$refs.groupForm.validate(valid => {
        let setSate = true;
        let obj = {
          downTime: this.groupForm.clockOutTime,
          groupName: this.groupForm.groupName,
          latitude: this.groupForm.latitude,
          longitude: this.groupForm.longitude,
          organizationNo: this.groupForm.organization[this.groupForm.organization.length-1] || '',
          signRang: this.groupForm.clockScope,
          signSite: this.groupForm.clockLocation,
          upTime: this.groupForm.clockInTime
        };
        for (let item in obj) {
          if (obj[item] == null || obj[item].length == 0) {
            delete obj[item];
            setSate = false;
          }
        }

        //console.log(obj.upTime>obj.downTime)
        if (obj.upTime < obj.downTime && setSate) {
          this.groupLoading = true;
          this.api.addUerAttendanceConfig(obj).then(res => {
            //console.log(res)
            if (res.code == 200) {
              this.createGroupModel = false;
              this.groupLoading = false;
              this.info(res.msg);
              this.attendanceQuery(1);
            } else {
              this.groupLoading = false;
              this.info(res.msg);
            }
          });
        }
      });
    },

    // 人员管理对话框显示
    personManagementModalShow(row) {
      this.currentRow = row;
      this.transferData = [];
      this.targetKeys = [];
      this.groupId = row.groupID;
      //console.log(this.groupId);
      this.personManagementModal = true;
      // 获取未拥有分组的职员
      this.api.selectGroupIDNullPeople().then(res => {
        //console.log(res)
        if (res.code == 200) {
          if (res.data) {
            let leftList = [];
            res.data.forEach(element => {
              this.transferData.push({
                key: element.useragentcode,
                label: element.username
              });
              leftList.push(element.useragentcode);
            });
            this.leftList = leftList;
          }
        }
      });
      // 查询组内成员
      this.api.selectGroupPeople({ groupID: this.groupId }).then(res => {
        //console.log(res)
        if (res.code == 200) {
          if (res.data) {
            this.targetKeys = [];
            let rightList = [];
            res.data.forEach(element => {
              this.transferData.push({
                key: element.useragentcode,
                label: element.username
              });
              rightList.push(element.useragentcode);
              this.targetKeys.push(element.useragentcode);
            });
            this.rightList = rightList;
          }
        }
      });
    },
    renderFormat(item) {
      return item.label;
    },
    onChange(newTargetKeys, direction, moveKeys) {
      // console.log(newTargetKeys, direction, moveKeys);
      this.targetKeys = newTargetKeys;
      let transferList = [];
      this.transferData.map(item => {
        transferList.push(item.key);
      });
      this.transferList = transferList;
    },

    arrMinus(arr1, arr2) {
      if (arr1.length > arr2.length) {
        let m = {};
        arr1.forEach(function(al) {
          m[al] = al;
        });
        arr2.forEach(function(bl) {
          delete m[bl];
        });
        return Object.keys(m);
      } else {
        let m = {};
        arr2.forEach(function(al) {
          m[al] = al;
        });
        arr1.forEach(function(bl) {
          delete m[bl];
        });
        return Object.keys(m);
      }
    },

    // 人员管理对话框取消
    personManagementCancel() {
      this.personManagementModalShow(this.currentRow);
      this.personManagementModal = false;
      this.roleSubmit = false;
    },
    // 人员管理对话框保存
    personManagementSubmit() {
      this.roleSubmit = true;
      // console.log(this.leftList)
      this.newLeftList = [];
      this.newLeftList = this.arrMinus(this.transferList, this.targetKeys);
      // console.log(this.newLeftList)
      // console.log(this.rightList)
      // console.log(this.targetKeys);
      let obj = {
        groupID: this.groupId,
        adduseragentcodeList: this.targetKeys + "",
        deluseragentcodeList: this.newLeftList + ""
      };
      // console.log(obj);

      this.api.peopleAddGroupID(obj).then(res => {
        // console.log(res);
        if (res.code == 200) {
          this.roleSubmit = false;
          this.attendanceQuery(1);
          this.targetKeys = [];
        } else {
          this.roleSubmit = false;
        }
      });
      this.personManagementModal = false;
    },

    // 修改信息对话框
    updateInfoModalShow(row) {
      this.groupId = row.groupID;
      this.updateGroupForm.organization = row.organizationNo;
      this.updateGroupForm.groupName = row.groupName;
      this.updateGroupForm.clockInTime = row.upTime;
      this.updateGroupForm.clockOutTime = row.downTime;
      this.updateGroupForm.clockLocation = row.signSite;
      this.updateGroupForm.clockScope = row.signRang;
      this.updateGroupForm.longitude = row.longitude;
      this.updateGroupForm.latitude = row.latitude;

      this.groupId = row.groupID;
      this.updateInfoModal = true;
    },
    updateGroupCancel() {
      this.$refs.updateGroupForm.resetFields();
      this.updateInfoModal = false;
      this.updateSubmit = false;
    },
    updateGroupSubmit() {
      this.$refs.updateGroupForm.validate(valid => {
        if (valid) {
          this.updateSubmit = true;
          let obj = {
            upTime: this.updateGroupForm.clockInTime,
            downTime: this.updateGroupForm.clockOutTime,
            signSite: this.updateGroupForm.clockLocation,
            signRang: this.updateGroupForm.clockScope,
            latitude: this.updateGroupForm.latitude,
            longitude: this.updateGroupForm.longitude,
            id: this.groupId,
            groupName: this.updateGroupForm.groupName
          };
          //console.log(obj)
          if (obj.upTime < obj.downTime) {
            this.api.updateUerAttendanceConfig(obj).then(res => {
              //console.log(res)
              if (res.code == 200) {
                this.updateSubmit = false;
                this.info(res.msg);
                this.updateInfoModal = false;
                this.attendanceQuery(1);
              } else {
                this.info(res.msg);
                this.updateSubmit = false;
              }
            });
          }
        }
      });
    },
    // 删除小组
    deleteGroup(row) {
      this.delModal = true;
      this.delRow = row;
    },
    delSubmit() {
      $.ajax("scrm-gateway/scrm-uer/api/uerAttendanceConfig/" + this.delRow.groupID, {
        method: "delete",
        contentType: "application/json;charset=utf-8",
        beforeSend: function(xhr) {
          xhr.setRequestHeader(
            "Authorization",
            sessionStorage.getItem("credentials")
          );
        },
        success: res => {
          //console.log(res)
          if (res.code == 200) {
            this.info(res.msg);
            this.attendanceQuery(1);
            this.delModal = false;
          }
        },
        error: res => {
          this.info(res.msg);
          this.delModal = false;
        }
      });
    },
    delCancel() {
      this.delModal = false;
      this.delRow = [];
    },
    // 页面切换
    indexChange(index) {
      this.pageIndex = index;
      this.pageSubmit();
    },
    // 每页数量切换
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageSubmit();
    }
  },
  mounted() {
    this.getSelectList();
    this.attendanceQuery(1);
  }
};
</script>
<style scoped lang="less">
</style>

<style>
.ivu-modal-header {
  background-color: #2d8cf0;
}
.ivu-modal-close .ivu-icon-ios-close {
  color: #fff !important;
}
</style>